<template>
  <AppLayout>
    <div class="about-page">
      <div class="page-header">
        <h1>关于我们</h1>
        <p>了解体感游戏平台的故事和使命</p>
      </div>

      <div class="about-content">
        <el-row :gutter="30">
          <el-col :span="16">
            <div class="about-section">
              <h2>我们的故事</h2>
              <p>体感游戏平台成立于2020年，是一家专注于体感游戏开发和分发的创新科技公司。我们的创始团队由一群热爱游戏和技术的专业人士组成，他们拥有丰富的游戏开发和人机交互经验。</p>
              <p>在过去的几年里，我们见证了体感技术的飞速发展，也看到了人们对更加沉浸式、互动性更强的游戏体验的需求不断增长。我们相信，体感游戏代表了游戏产业的未来发展方向，它能够为玩家带来前所未有的游戏体验。</p>
              <p>基于这一理念，我们创建了这个平台，致力于为全球玩家提供最优质的体感游戏内容，同时也为体感游戏开发者提供一个展示和分发作品的平台。</p>
            </div>

            <div class="about-section mt-20">
              <h2>我们的使命</h2>
              <p>我们的使命是通过创新的体感技术，让游戏变得更加有趣、健康和社交化。我们希望：</p>
              <ul>
                <li>推动体感游戏技术的发展和普及</li>
                <li>为玩家提供高质量、多样化的体感游戏内容</li>
                <li>鼓励人们通过体感游戏增加身体活动，保持健康的生活方式</li>
                <li>创造一个开放、包容的游戏社区，让玩家可以分享游戏体验和创意</li>
              </ul>
            </div>

            <div class="about-section mt-20">
              <h2>我们的团队</h2>
              <el-row :gutter="20">
                <el-col :span="8" v-for="(member, index) in teamMembers" :key="index">
                  <div class="team-member">
                    <el-avatar :size="100" :src="member.avatar"></el-avatar>
                    <h3>{{ member.name }}</h3>
                    <p>{{ member.position }}</p>
                  </div>
                </el-col>
              </el-row>
            </div>
          </el-col>

          <el-col :span="8">
            <div class="sidebar">
              <div class="company-info">
                <h3>公司信息</h3>
                <ul>
                  <li><strong>成立时间：</strong>2020年</li>
                  <li><strong>总部地址：</strong>北京市海淀区中关村科技园</li>
                  <li><strong>员工人数：</strong>50+</li>
                  <li><strong>合作伙伴：</strong>20+</li>
                  <li><strong>游戏数量：</strong>100+</li>
                </ul>
              </div>

              <div class="contact-info mt-20">
                <h3>联系我们</h3>
                <ul>
                  <li><i class="el-icon-location"></i> 北京市海淀区中关村科技园</li>
                  <li><i class="el-icon-phone"></i> 400-123-4567</li>
                  <li><i class="el-icon-message"></i> contact@motionsensing.com</li>
                </ul>
              </div>

              <div class="social-media mt-20">
                <h3>关注我们</h3>
                <div class="social-icons">
                  <a href="#" class="social-icon"><i class="el-icon-s-platform"></i></a>
                  <a href="#" class="social-icon"><i class="el-icon-s-custom"></i></a>
                  <a href="#" class="social-icon"><i class="el-icon-s-promotion"></i></a>
                  <a href="#" class="social-icon"><i class="el-icon-s-cooperation"></i></a>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>

      <div class="partners-section mt-20">
        <h2>我们的合作伙伴</h2>
        <div class="partners-list">
          <el-row :gutter="20">
            <el-col :span="4" v-for="(partner, index) in partners" :key="index">
              <div class="partner-logo">
                <img :src="partner.logo" :alt="partner.name" />
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
  </AppLayout>
</template>

<script setup>
import { ref } from 'vue'
import AppLayout from '../components/layout/Layout.vue'

defineOptions({
  name: 'AboutPage'
})

// 团队成员数据
const teamMembers = ref([
  {
    name: '张三',
    position: '创始人 & CEO',
    avatar: 'https://via.placeholder.com/100'
  },
  {
    name: '李四',
    position: '技术总监',
    avatar: 'https://via.placeholder.com/100'
  },
  {
    name: '王五',
    position: '创意总监',
    avatar: 'https://via.placeholder.com/100'
  },
  {
    name: '赵六',
    position: '市场总监',
    avatar: 'https://via.placeholder.com/100'
  },
  {
    name: '钱七',
    position: '游戏制作人',
    avatar: 'https://via.placeholder.com/100'
  },
  {
    name: '孙八',
    position: '用户体验设计师',
    avatar: 'https://via.placeholder.com/100'
  }
])

// 合作伙伴数据
const partners = ref([
  {
    name: '合作伙伴1',
    logo: 'https://via.placeholder.com/150x80'
  },
  {
    name: '合作伙伴2',
    logo: 'https://via.placeholder.com/150x80'
  },
  {
    name: '合作伙伴3',
    logo: 'https://via.placeholder.com/150x80'
  },
  {
    name: '合作伙伴4',
    logo: 'https://via.placeholder.com/150x80'
  },
  {
    name: '合作伙伴5',
    logo: 'https://via.placeholder.com/150x80'
  },
  {
    name: '合作伙伴6',
    logo: 'https://via.placeholder.com/150x80'
  }
])
</script>

<style scoped>
.about-page {
  padding: 20px 0;
}

.page-header {
  text-align: center;
  margin-bottom: 40px;
}

.page-header h1 {
  font-size: 32px;
  color: #303133;
  margin-bottom: 10px;
}

.page-header p {
  color: #606266;
  font-size: 16px;
}

.about-section {
  margin-bottom: 30px;
}

.about-section h2 {
  font-size: 24px;
  color: #303133;
  margin-bottom: 20px;
  position: relative;
  padding-bottom: 10px;
}

.about-section h2:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 50px;
  height: 3px;
  background-color: #409EFF;
}

.about-section p {
  line-height: 1.8;
  margin-bottom: 15px;
  color: #606266;
}

.about-section ul {
  padding-left: 20px;
  margin-bottom: 15px;
}

.about-section li {
  margin-bottom: 10px;
  line-height: 1.6;
  color: #606266;
}

.team-member {
  text-align: center;
  margin-bottom: 30px;
}

.team-member h3 {
  margin: 15px 0 5px;
  font-size: 18px;
}

.team-member p {
  color: #909399;
  margin: 0;
}

.sidebar {
  background-color: #f5f7fa;
  border-radius: 8px;
  padding: 20px;
}

.sidebar h3 {
  font-size: 18px;
  margin-bottom: 15px;
  color: #303133;
}

.sidebar ul {
  list-style: none;
  padding: 0;
}

.sidebar li {
  margin-bottom: 10px;
  color: #606266;
}

.social-icons {
  display: flex;
  gap: 15px;
}

.social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background-color: #409EFF;
  color: white;
  border-radius: 50%;
  font-size: 20px;
  text-decoration: none;
}

.social-icon:hover {
  background-color: #337ecc;
}

.partners-section {
  text-align: center;
}

.partners-section h2 {
  font-size: 24px;
  color: #303133;
  margin-bottom: 30px;
}

.partner-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100px;
  background-color: white;
  border-radius: 8px;
  padding: 10px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}

.partner-logo img {
  max-width: 100%;
  max-height: 80px;
}
</style>